Skip to content

Add 3 example DESIGN.md directories with derived files - #4

Merged
xkxx merged 1 commit into
mainfrom
examples/design-system-demos
Apr 13, 2026
Merged

Add 3 example DESIGN.md directories with derived files#4
xkxx merged 1 commit into
mainfrom
examples/design-system-demos

Conversation

@xkxx

@xkxx xkxx commented Apr 11, 2026

Copy link
Copy Markdown
Contributor

Summary

Add three example design systems to the `examples/` directory, each demonstrating the DESIGN.md format and how its design tokens can be translated into common downstream formats.

Examples

Directory Theme Description
`paws-and-paths/` Light, warm Pet walking platform — golden orange + sky blue, Plus Jakarta Sans
`totality-festival/` Dark, cosmic Eclipse music festival — obsidian + corona gold + cyan, Space Grotesk + Inter
`atmospheric-glass/` Dark, glass Weather app — deep blue + monochromatic white glassmorphism, Inter

Files per example

File Description
`DESIGN.md` Complete design system spec with YAML frontmatter tokens and markdown style guidance
`tailwind.config.js` Tailwind CSS v3 theme config derived from the design tokens (colors, typography, border-radius, spacing)
`design_tokens.json` DTCG-compliant JSON with all tokens including component-level tokens
`README.md` Description of the example and what each derived file demonstrates

Design Tokens JSON

The `design_tokens.json` files conform to the Design Tokens Community Group spec:

  • Colors: Structured `colorSpace` + `components` + `hex` format
  • Dimensions: Separated `value` and `unit` objects
  • Typography: Composite tokens with dimension sub-objects for fontSize, lineHeight, letterSpacing
  • References: Direct `"{token.path}"` strings replacing the referenced object

Tailwind Config

The `tailwind.config.js` files translate the primitive design tokens (excluding components) into Tailwind v3 theme extensions with:

  • Flat color map (no nesting)
  • Per-typography-level font family entries
  • `darkMode: "class"`

Add three example design systems demonstrating DESIGN.md format and
its derived outputs:

- paws-and-paths: Warm pet-care platform (light theme, Plus Jakarta Sans)
- totality-festival: Solar eclipse festival (dark cosmic theme, Space Grotesk + Inter)
- atmospheric-glass: Weather app (glassmorphism, Inter)

Each example includes:
- DESIGN.md: Complete design system spec with YAML frontmatter tokens and
  markdown style guidance
- tailwind.config.js: Tailwind CSS v3 theme config derived from the
  design tokens (colors, typography, border-radius, spacing)
- design_tokens.json: DTCG-compliant JSON with all tokens including
  component-level tokens, using structured color/dimension/typography values
@xkxx
xkxx requested a review from davideast April 11, 2026 06:52
@xkxx
xkxx merged commit 2e511e4 into main Apr 13, 2026
3 checks passed
@davideast
davideast deleted the examples/design-system-demos branch April 13, 2026 21:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants